<template>
  <div element-loading-text="提交中">
    <el-form label-width="120px" :rules="rules" :disabled="view" size="small" ref="dataForm" :model="livingAllowances">
      <el-card :body-style="{ padding: '20px' }" class="el-card-top el-card-tops el-card-user">
        <div slot="header" class="clearfix">
          <span class="el-card-header">申请人信息</span>
        </div>
        <el-container>
          <el-main>
            <approval-user :approval-user="livingAllowances.approvalUser"></approval-user>
            <el-row class="el-row-list el-card-user">
              <el-col :span="8">
                <el-form-item label="户口类别" prop="householdType">
                  <el-select class="smallBSelect" v-model="livingAllowances.householdType" placeholder="请选择户口类别">
                    <el-option v-for="item in options['householdType']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话" prop="phone">
                  <el-input class="smallBSelect"  v-model="livingAllowances.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="家庭年收入" prop="annualIncome">
                  <el-input class="smallBSelect" v-model.number="livingAllowances.annualIncome"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="el-row-list el-card-user">
              <el-col :span="8">
                <el-form-item label="人均年收入" prop="avgIncome">
                  <el-input class="smallBSelect" v-model.number="livingAllowances.avgIncome"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="家庭人口" prop="familyNumber">
                  <el-input class="smallBSelect" readonly  v-model.number="livingAllowances.familyNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="现住址" prop="leastAddress">
                  <el-input class="smallBSelect" v-model="livingAllowances.leastAddress"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="el-row-list el-card-user el-card-userListareacode">
              <el-col :span="24">
                <el-form-item label="户籍地址" prop="areaCode">
                  <region-selector :disabled="view" :province="region.province" :city="region.city" :area="region.area"
                    :street="region.street" :community="region.community" :hideProvince="region.city!==0" :hideCity="region.area!==0"
                    :hideArea="region.street!==0 || region.area!==0"  @region="setAreaCode">
                  </region-selector>
                  <el-input style="display:none" type="hidden" v-model="livingAllowances.areaCode"></el-input>
                  <el-input class="ptInput" size="small" v-model="livingAllowances.householdAddress" placeholder="户籍地址补充"></el-input>
                </el-form-item>
              </el-col>
            
            </el-row>
          </el-main>
          <el-aside style="display: flex;align-items: center;" width="180px">
            <img class="idCardImgItem" :src="livingAllowances.approvalUser.idCardImg">
          </el-aside>
        </el-container>
      </el-card>
      <el-card :body-style="{ padding: '20px' }" class="memberTemp el-card-top">
        <div slot="header" class="clearfix">
          <span class="el-card-header">家庭信息</span>
        </div>
        <el-table :data="livingAllowances.members">
          <el-table-column label="与本人关系" width="120">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select style="margin-top: 36px;" size="small" v-model="scope.row.relation" placeholder="请选择">
                  <el-option v-for="item in options['relation']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                </el-select>
              </template>
              <span v-else>{{ scope.row.relation | mapLabel('relation') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="120">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <md-input class="edit-input" size="small" v-model="scope.row.memberName"></md-input>
              </template>
              <span v-else>{{ scope.row.memberName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select style="margin-top: 36px;" size="small" v-model="scope.row.sex" placeholder="请选择性别">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </template>
              <span v-else>{{ scope.row.sex }}</span>
            </template>
          </el-table-column>
          <el-table-column label="身份证号" width="140">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <md-input class="edit-input" size="small" @change="handleEditIdcard(scope.row)" v-model="scope.row.idCard"></md-input>
              </template>
              <el-tooltip v-else class="item" effect="dark" :content="scope.row.idCard" placement="top-start">
                <p>{{scope.row.idCard | idCardFun}}</p>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="民族">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select style="margin-top: 36px;" size="small" v-model="scope.row.nationalityDisplay" placeholder="请选择民族">
                  <el-option v-for="item in options['nationality']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                </el-select>
              </template>
              <span v-else>{{ scope.row.nationalityDisplay }}</span>
            </template>
          </el-table-column>
          <el-table-column label="就业就读状况" width="130">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <md-input class="edit-input" size="small" v-model="scope.row.workStatus"></md-input>
              </template>
              <span v-else>{{ scope.row.workStatus }}</span>
            </template>
          </el-table-column>
          <el-table-column label="身体状况" width="120">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select style="margin-top: 36px;" size="small" v-model="scope.row.health" placeholder="请选择身体状况">
                  <el-option v-for="item in options['health']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                </el-select>
              </template>
              <span v-else>{{ scope.row.health | mapLabel('health')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="分类施保情况" width="120">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select style="margin-top: 36px;" @change="handleEditFlsbType(scope.row)" v-if="approvalKey==='LIVING_ALLOWANCES'"
                  size="mini" v-model="scope.row.flsbType" placeholder="分类施保情况">
                  <el-option v-for="item in options['flsbType']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                </el-select>
                <el-select style="margin-top: 36px;" @change="handleEditFlsbType(scope.row)" v-else-if="approvalKey==='LIVING_ALLOWANCES_AGRICULTURAL'"
                  size="mini" v-model="scope.row.flsbType" placeholder="分类施保情况">
                  <el-option v-for="item in options['flsbTypeAgri']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                </el-select>
              </template>
              <span v-else>{{ scope.row.flsbType | mapLabel('flsbType') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分类施保金" width="120">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <md-input class="edit-input" size="small" :readonly="true" v-model="scope.row.flsbMoney"></md-input>
              </template>
              <span v-else>{{ scope.row.flsbMoney }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否保障">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select style="margin-top: 36px;" size="small" @change="handleEditProtection(scope.row)" v-model="scope.row.protection" placeholder="请选择是否保障">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </template>
              <div v-else>
                <span v-if="scope.row.protection===true">是</span>
                <span v-else-if="scope.row.protection===false">否</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <md-input class="edit-input" size="small" v-model="scope.row.remark"></md-input>
              </template>
              <span v-else>{{ scope.row.remark }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="!view" align="center" label="操作" width="150" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope)" size="small" icon="el-icon-circle-check-outline"></el-button>
              <el-button v-else type="primary" @click='handleEditMembersRow(scope,scope.$index)' size="small" icon="el-icon-edit"></el-button>
              <el-button size="mini" v-if="scope.row.relation!=='本人'" @click="onDeleteMembersData(scope.$index)" type="danger"
                icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--动态行-->
        <el-row :gutter="10" v-if="!view">
          <el-col class="memberTempjtxin" :span="2">
            <el-select style="margin-top: 28px; border:none;" size="mini" v-model="memberTemp.relation" placeholder="关系">
              <el-option v-for="item in options['relation']" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <md-input v-model="memberTemp.memberName" placeholder="请输入姓名">姓名</md-input>
          </el-col>
          <el-col class="memberTempjtxin" :span="2">
            <el-select style="margin-top: 28px;" size="mini" v-model="memberTemp.sex" placeholder="性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <md-input v-model.lazy="memberTemp.idCard" placeholder="请输入身份证号">身份证号</md-input>
          </el-col>
          <el-col class="memberTempjtxin" :span="2">
            <el-select style="margin-top: 28px;" size="mini" v-model="memberTemp.nationalityDisplay" placeholder="民族">
              <el-option v-for="item in options['nationality']" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <md-input v-model="memberTemp.workStatus" placeholder="输入就业就读情况">就业就读情况</md-input>
          </el-col>
          <el-col class="memberTempjtxin" :span="2">
            <el-select style="margin-top: 28px;" size="mini" v-model="memberTemp.health" placeholder="身体状况">
              <el-option v-for="item in options['health']" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col class="memberTempjtxin" :span="2">
            <el-select @change="handleSelectFlsbType" v-if="approvalKey==='LIVING_ALLOWANCES'" style="margin-top: 28px;"
              size="mini" v-model="memberTemp.flsbType" placeholder="分类施保情况">
              <el-option v-for="item in options['flsbType']" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
            <el-select class="memberTempjtxin" @change="handleSelectFlsbType" v-else-if="approvalKey==='LIVING_ALLOWANCES_AGRICULTURAL'" style="margin-top: 28px;"
              size="mini" v-model="memberTemp.flsbType" placeholder="分类施保情况">
              <el-option v-for="item in options['flsbTypeAgri']" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <md-input v-model="memberTemp.flsbMoney" :readonly="true">分类施保金</md-input>
          </el-col>
          <el-col class="memberTempjtxin" :span="2">
            <el-select style="margin-top: 28px;" size="mini" v-model="memberTemp.protection" placeholder="是否保障">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <md-input v-model="memberTemp.remark" placeholder="请输入备注">备注</md-input>
          </el-col>
          <el-col :span="2">
            <div style="margin-top: 25px;">
              <el-button size="mini" plain round @click="onAddMembers">新增成员</el-button>
            </div>
          </el-col>
        </el-row>
        <el-alert v-if="memberTempError===true" :title="memberTempErrorMsg" type="error">
        </el-alert>
      </el-card>
      <el-card :body-style="{ padding: '20px' }" class="el-card-top">
        <div slot="header" class="clearfix">
          <span class="el-card-header">业务信息</span>
        </div>
        <el-row class="el-row-list el-card-user">
          <el-col :span="6">
            <el-form-item label="基础保障金" prop="baseMoney">
              <el-select v-if="approvalKey==='LIVING_ALLOWANCES_AGRICULTURAL'" class="ptSelect" @change="onAddApprovedMoney"
                v-model="livingAllowances.baseMoney" placeholder="请选择基础保障金额">
                <el-option v-for="item in options['baseMoney']" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
              <el-input v-else class="ptSelect" readonly  v-model.number="livingAllowances.baseMoney"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="保障人口" prop="livingAllowancesNumber">
              <el-input class="ptSelect" readonly   @input="onAddApprovedMoney"  v-model.number="livingAllowances.livingAllowancesNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="取暖费" prop="heatingCosts">
              <el-input class="ptSelect" @input="onAddApprovedMoney"  v-model.number="livingAllowances.heatingCosts"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电价补贴" prop="electricitySubsidy">
              <el-input class="ptSelect" @input="onAddApprovedMoney"  v-model.number="livingAllowances.electricitySubsidy"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="el-row-list el-card-user">
          <el-col :span="6">
            <el-form-item label="其他" prop="otherMoney">
              <el-input class="ptSelect" @input="onAddApprovedMoney" v-model.number="livingAllowances.otherMoney"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="核定金额" prop="approvedMoney">
              <el-input class="ptSelect"  readonly v-model.number="livingAllowances.approvedMoney"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开户行" prop="accountType">
              <el-select class="ptSelect" v-model="livingAllowances.accountType" placeholder="请选择开户行">
                <el-option v-for="item in options['bank']" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分类施保金合计" prop="flsbMoney">
              <el-input class="ptSelect"  readonly v-model.number="livingAllowances.flsbMoney"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="el-row-list el-card-user">
        </el-row>
        <el-row class="el-row-list el-card-user">
          <el-col :span="6">
            <el-form-item label="补助账号" prop="account">
              <el-input class="ptSelect" v-model="livingAllowances.account"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注" prop="remark">
              <el-input class="ptSelect" v-model="livingAllowances.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card :body-style="{ padding: '20px' }" class="el-card-top">
        <div slot="header" class="clearfix">
          <span class="el-card-header">社区/村意见</span>
        </div>
        <el-row class="el-row-list el-card-user">
          <el-col :span="6">
            <el-form-item label="评议日期" prop="communityDate">
              <el-date-picker class="ptSelect" type="date" placeholder="选择日期" v-model="livingAllowances.communityDate"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人" prop="communityContact">
              <el-input class="ptSelect" v-model="livingAllowances.communityContact"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="communityPhone">
              <el-input class="ptSelect" v-model="livingAllowances.communityPhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="el-row-list el-card-user">
        </el-row>
        <el-row>
          <el-col :span="17">
            <el-form-item label="评议意见" prop="communityOpinion">
              <el-input type="textarea" v-model="livingAllowances.communityOpinion"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <electronic-data ref="electronicFiles" :view="view" :idCardInfo="idCardInfo" :files="livingAllowances.files" :photos="photos"
      :fileDefNameList="fileDefNameList"></electronic-data>
  </div>
</template>
<script>
import MdInput from "@/components/MDinput";
import ElectronicData from "./ElectronicData";
import ApprovalUser from "./ApprovalUser";
import {
  submitLaApproval,
  tempStorage,
  changeLa,
  changeReportLa
} from "@/api/reception";
import { queryLADetail } from "@/api/approval";
import { closeCollectTag, getAgeEtc } from "@/utils/tools";
import { packRegionCode } from "@/utils/region";
import RegionSelector from "@/components/RegionSelector";
import { deleteTempById } from "@/api/temp";
import dict from "@/assets/dict";
import { mapLabel } from "@/utils/dict";
import { validateMobilePhone } from "@/utils/validate";


export default {
  components: {
    MdInput,
    ApprovalUser,
    RegionSelector,
    ElectronicData
  },
  props: [
    "photos",
    "idCardInfo",
    "livingAllowancesTemp",
    "view",
    "approvalKey",
    "approvalId"
  ],
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!validateMobilePhone(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      livingAllowances: {
        approvalId: null,
        tempId: null,
        approvalUser: {
          idCard: null,
          sex: null,
          name: null,
          address: null,
          householdType: null,
          phone: null,
          nationalityDisplay: null,
          birthDay: null,
          distDeprt: null,
          idCardImg: null
        },
        phone: null,
        members: [],
        areaCode: null, //地区CODE
        areaName: null, //行政区划名称
        householdAddress: null, //户籍地址补充
        householdType: null, //户口类型
        householdTypeName: null, //户口类型名称
        leastAddress: null, //最近住址
        familyNumber: null, //家庭人口
        baseMoney: null,
        livingAllowancesNumber: null, //低保人口
        electricitySubsidy: null, //电价补贴
        heatingCosts: null, //取暖费
        accountType: null,
        account: null,
        totalMoney: null,
        flsbMoney: null,
        otherMoney: null,
        approvedMoney: null,
        communityDate: null, //评议日期
        communityPhone: null, //社区电话
        communityContact: null, //社区负责人
        communityOpinion: null, //社区意见
        files: [] //文件s
      },
      memberTemp: {
        relation: null,
        relationName: null,
        memberName: null,
        sex: null,
        idCard: null,
        nation: null,
        workStatus: null,
        health: null,
        healthDisplay: null,
        flsbTypeDisplay: null, //分类施保情况
        flsbType: null,
        flsbMoney: null, //分类施保金
        nationalityDisplay: null,
        protection: null,
        remark: null,
        edit: false
      },
      region: this.$store.state.user.region,
      memberTempError: false,
      memberTempErrorMsg: "除备注外其他信息必填",
      options: this.$store.state.dict.options,
      rules: {
        householdType: [
          { required: true, message: "请选择户口类别", trigger: "change" }
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" },
          { validator: validatePhone}
        ],
        annualIncome: [
          { required: true, message: "请输入家庭年收入", trigger: "blur" },
          { type: 'number', message: '家庭年收入必须为数字值'}
        ],
        avgIncome: [
          { required: true, message: "请输入人均年收入", trigger: "blur" },
          { type: 'number', message: '人均年收入必须为数字值'}
        ],
        familyNumber: [
          { required: true, message: "请输入家庭人口", trigger: "blur" },
          { type: 'number', message: '家庭人口必须为数字值'}
        ],
        areaCode: [
          { required: true, message: "请输入户籍地址", trigger: "blur" }
        ],
        leastAddress: [
          { required: true, message: "请输入现住址", trigger: "blur" }
        ],
        baseMoney: [
          { required: true, message: "请选择基础保障金", trigger: "change" },
          { type: 'number', message: '基础保障金必须为数字值'}
        ],
        livingAllowancesNumber: [
          { required: true, message: "请输入保障人口", trigger: "blur" },
          { type: 'number', message: '保障人口必须为数字值'}
        ],
        flsbMoney: [
          { required: true, message: "请输入分类施保金合计", trigger: "blur" }
        ],
        electricitySubsidy: [
          { required: true, message: "请输入电价补贴", trigger: "blur" },
          { type: 'number', message: '电价补贴必须为数字值'}
        ],
        heatingCosts: [
          { required: true, message: "请输入取暖费", trigger: "blur" },
          { type: 'number', message: '取暖费必须为数字值'}
        ],
        accountType: [
          { required: true, message: "请选择开户行", trigger: "change" }
        ],
        account: [
          { required: true, message: "请输入补助账号", trigger: "blur" }
        ],
        otherMoney: [
          { required: true, message: "请输入其它金额", trigger: "blur" },
          { type: 'number', message: '其它金额必须为数字值'}
        ],
        approvedMoney: [
          { required: true, message: "请输入核定金额", trigger: "blur" }
        ],
        communityDate: [
          { required: true, message: "请选择评议日期", trigger: "change" }
        ],
        communityContact: [
          { required: true, message: "请输入负责人", trigger: "blur" }
        ],
        communityPhone: [
          { required: true, message: "请输入联系电话", trigger: "blur" }
        ],
        communityOpinion: [
          {
            required: true,
            message: "请输入评议意见",
            trigger: "blur"
          }
        ]
      },
      fileDefNameList: [
        {
          label: "书面申请书",
          value: "smsqs"
        },
        {
          label: "申请审批表",
          value: "sqspb"
        },
        {
          label: "家庭经济状况核查授权委托书",
          value: "jtjjzk"
        },
        {
          label: "户口簿",
          value: "hkb"
        },
        {
          label: "收入证明",
          value: "srzm"
        },
        {
          label: "一卡通",
          value: "ykt"
        },
        {
          label: "残疾证",
          value: "cjz"
        },
        {
          label: "结婚证",
          value: "jhz"
        },
        {
          label: "其他",
          value: "qt"
        }
      ]
    };
  },
  watch: {
    'livingAllowances.members':  {
      handler: function(val, oldVal) {
        this.livingAllowances.familyNumber = val.length;
        this.livingAllowances.livingAllowancesNumber = val.filter(m => m.protection===true).length;
        this.livingAllowances.flsbMoney = val.filter(m => m.flsbMoney).map(m => m.flsbMoney).reduce(function(a, b) {
            return a + b;
        }, 0);
        this.onAddApprovedMoney();

        val.forEach(m => {
          if (m.relationName === '本人') {
            this.livingAllowances.approvalUser.idCard = m.idCard;
          }
        });
      },
      deep: true
    },
    'memberTemp.idCard' : function(val, oldVal) {
      var info = getAgeEtc(val);
      if (info === 0) {
        return;
      }
      this.memberTemp.sex = info.sex;
    },
    'memberTemp.protection' : function(val, oldVal) {
      if (val === false) {
        this.memberTemp.flsbType = null;
        this.memberTemp.flsbMoney = null;
      }
    },
    'memberTemp.flsbType' : function(val, oldVal) {
      if (val !== null && val !== undefined) {
        this.memberTemp.protection = true;
      }
    },
    'approvalId' : function(val, oldVal) {
      this.queryDetail()
    }
  },
  created() {
    if (this.idCardInfo) {
      this.livingAllowances.approvalUser = this.idCardInfo;
    }
    if (this.view) {
      this.onView();
    }
    if (this.approvalKey === "LIVING_ALLOWANCES") {
      this.livingAllowances.baseMoney = 513;
      this.livingAllowances.approvedMoney += this.livingAllowances.baseMoney;
    }
    if(this.livingAllowancesTemp){
      this.livingAllowances = this.livingAllowancesTemp;
      let ageEtc = getAgeEtc(this.livingAllowances.approvalUser.idCard);
      this.livingAllowances.approvalUser.age = ageEtc.age;
      this.region = packRegionCode(this.livingAllowances.areaCode);
    }
  },
  filter: {
    ageFilter(val) {
      if (val) {
        return val;
      } else {
        return "暂无";
      }
    }
  },
  methods: {
    queryDetail(){
      queryLADetail(this.approvalId).then(res => {
        this.livingAllowances = res.data;
        let ageEtc = getAgeEtc(this.livingAllowances.approvalUser.idCard);
        this.livingAllowances.approvalUser.age = ageEtc.age;
        this.region = packRegionCode(this.livingAllowances.areaCode);
      });
    },
    onView() {
      let temp = this;
      setTimeout(() => {
        temp.$refs["dataForm"].clearValidate();
      }, 10);
      if (
        this.livingAllowances.areaCode &&
        this.livingAllowances.areaCode.length > 5
      ) {
        this.region = packRegionCode(this.livingAllowances.areaCode);
      }
    },
    submit() {
      let temp = this;
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.livingAllowances.members.length === 0) {
            this.$message({
              message: "请填写家庭成员信息",
              type: "error"
            });
            return;
          }
          this.livingAllowances.approvalUser.birthDay = new Date(
            this.livingAllowances.approvalUser.birthDay
          ).getTime();
          this.livingAllowances.communityDate = new Date(
            this.livingAllowances.communityDate
          ).getTime();
          this.livingAllowances.approvalKey = this.approvalKey;
          //获取文件数据
          this.$refs.electronicFiles.toStorage();
          const loading = this.$loading({
            lock: true,
            text: "提交中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
          this.$confirm("提交后将进入审批流程, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              submitLaApproval(this.livingAllowances).then(() => {
                this.resetMemberTemp();
                this.resetLivingAllowances();
                this.$notify({
                  title: "成功",
                  message: "提交成功",
                  type: "success",
                  duration: 2000
                });
                closeCollectTag(this);
                this.$router.push({ path: "/approval/joined" });
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        }
      });
    },
    toTempStorage() {
      this.livingAllowances.communityDate = new Date(
        this.livingAllowances.communityDate
      ).getTime();
      this.livingAllowances.approvalUser.birthDay = new Date(
        this.livingAllowances.approvalUser.birthDay
      ).getTime();
      this.livingAllowances.approvalKey = this.approvalKey;
      this.livingAllowances.idCard = this.livingAllowances.approvalUser.idCard;
      this.livingAllowances.approvalUserName = this.livingAllowances.approvalUser.name;
      if (this.livingAllowances.tempId) {
        this.livingAllowances.id = this.livingAllowances.tempId;
      }
      //获取文件数据
      this.$refs.electronicFiles.toStorage();
      const loading = this.$loading({
        lock: true,
        text: "上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
      this.$confirm("准备上传数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          tempStorage(this.livingAllowances).then(() => {
            this.resetMemberTemp();
            this.resetLivingAllowances();
            this.$notify({
              title: "成功",
              message: "上传成功",
              type: "success",
              duration: 2000
            });
            closeCollectTag(this);
            this.$router.push({ path: "/temporary" });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    handleChange(changeTemp) {
      let temp = this;
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.livingAllowances.members.length === 0) {
            this.$message({
              message: "请填写家庭成员信息",
              type: "error"
            });
            return;
          }
          this.livingAllowances.communityDate = new Date(
            this.livingAllowances.communityDate
          ).getTime();
          //修改审核
          if (changeTemp) {
            this.livingAllowances.changeType = changeTemp.changeType;
            this.livingAllowances.changeOpinion = changeTemp.changeType;
            this.livingAllowances.changePrincipal = changeTemp.changeType;
            this.livingAllowances.changeContact = changeTemp.changeType;
          }
          //获取文件数据
          this.$refs.electronicFiles.toStorage();
          const loading = this.$loading({
            lock: true,
            text: "提交中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
          this.$confirm("将修改申请数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              changeLa(this.livingAllowances).then(() => {
                this.resetMemberTemp();
                this.resetLivingAllowances();
                this.$notify({
                  title: "成功",
                  message: "提交成功",
                  type: "success",
                  duration: 2000
                });
                closeCollectTag(this);
                this.$router.push({ path: "/approval/joined" });
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        }
      });
    },
    handleChangeReport(changeTemp) {
      let temp = this;
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.livingAllowances.members.length === 0) {
            this.$message({
              message: "请填写家庭成员信息",
              type: "error"
            });
            return;
          }
          this.livingAllowances.communityDate = new Date(
            this.livingAllowances.communityDate
          ).getTime();
          //修改审核
          if (changeTemp) {
            this.livingAllowances.changeType = changeTemp.changeType;
            this.livingAllowances.changeOpinion = changeTemp.changeType;
            this.livingAllowances.changePrincipal = changeTemp.changeType;
            this.livingAllowances.changeContact = changeTemp.changeType;
          }
          //获取文件数据
          this.$refs.electronicFiles.toStorage();
          const loading = this.$loading({
            lock: true,
            text: "提交中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
          this.$confirm("将发起低保变更流程, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              changeReportLa(this.livingAllowances).then(() => {
                this.resetMemberTemp();
                this.resetLivingAllowances();
                this.$notify({
                  title: "成功",
                  message: "提交成功",
                  type: "success",
                  duration: 2000
                });
                closeCollectTag(this);
                this.$router.push({ path: "/approval/joined" });
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        }
      });
    },
    onAddMembers() {
      this.memberTempError = false;
      this.memberTempErrorMsg = "除备注外其他信息必填";
      this.validaMemberTemp(this.memberTemp);
      if (!this.memberTempError) {
        this.livingAllowances.members.push(this.memberTemp);
        this.resetMemberTemp();
      }
    },
    validaMemberTemp(memberTemp) {
      this.memberTempError = false;
      if (!memberTemp.relation) {
        this.memberTempError = true;
      }
      if (!memberTemp.memberName) {
        this.memberTempError = true;
      }
      if (!memberTemp.sex) {
        this.memberTempError = true;
      }
      if (!memberTemp.idCard) {
        this.memberTempError = true;
      } else {
        var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!regIdNo.test(memberTemp.idCard)) {
          this.memberTempError = true;
          this.memberTempErrorMsg = "身份证号格式不正确";
        }
      }
      if (!memberTemp.nationalityDisplay) {
        this.memberTempError = true;
      }
      if (!memberTemp.workStatus) {
        this.memberTempError = true;
      }
      if (!memberTemp.health) {
        this.memberTempError = true;
      }

      if (memberTemp.protection === null
        || memberTemp.protection === undefined) {
        this.memberTempError = true;
      }

      if (memberTemp.protection === true) {
        //保障，检测分类施保情况
        if (!memberTemp.flsbType) {
          this.memberTempError = true;
        }
        if (!memberTemp.flsbMoney) {
          this.memberTempError = true;
        }
      }
    },
    onDeleteMembersData(index) {
      const loading = this.$loading({
        lock: true,
        text: "提交中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        loading.close();
      }, 800);
      this.$confirm("确定删除家庭成员?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let memberTemp = this.livingAllowances.members[index];
          this.livingAllowances.members.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    handleEditMembersRow(scope, index) {
      scope.row.edit = !scope.row.edit;
      let tempRemark = scope.row.remark
      scope.row.remark = ''
      scope.row.remark = tempRemark
    },
    confirmEdit(scope) {
      this.validaMemberTemp(scope.row);
      if (!this.memberTempError) {
        scope.row.edit = false;
        let tempRemark = scope.row.remark
        scope.row.remark = ''
        scope.row.remark = tempRemark
        let flsbMoney = 0;
        if (this.approvalKey === "LIVING_ALLOWANCES") {
          flsbMoney = mapLabel(scope.row.flsbType, "flsbTypeMoney");
        } else if (this.approvalKey === "LIVING_ALLOWANCES_AGRICULTURAL") {
          flsbMoney = mapLabel(scope.row.flsbType, "flsbTypeAgriMoney");
        }
        this.$message({
          message: "修改成功",
          type: "success"
        });
      }
    },
    setAreaCode(data) {
      if (data.code) {
        this.livingAllowances.areaCode = data.code;
        this.livingAllowances.areaName = data.value;
      }
    },
    onAddApprovedMoney() {
      this.livingAllowances.approvedMoney =
        Number(this.livingAllowances.livingAllowancesNumber) *
          Number(this.livingAllowances.baseMoney) +
        Number(this.livingAllowances.electricitySubsidy) +
        Number(this.livingAllowances.heatingCosts) +
        Number(this.livingAllowances.otherMoney) +
        Number(this.livingAllowances.flsbMoney);
    },
    handleSelectFlsbType() {
      if (this.approvalKey === "LIVING_ALLOWANCES") {
        this.memberTemp.flsbMoney = mapLabel(
          this.memberTemp.flsbType,
          "flsbTypeMoney"
        );
      } else if (this.approvalKey === "LIVING_ALLOWANCES_AGRICULTURAL") {
        this.memberTemp.flsbMoney = mapLabel(
          this.memberTemp.flsbType,
          "flsbTypeAgriMoney"
        );
      }
    },
    handleEditFlsbType(row) {
      if (this.approvalKey === "LIVING_ALLOWANCES") {
        row.flsbMoney = mapLabel(row.flsbType, "flsbTypeMoney");
      } else if (this.approvalKey === "LIVING_ALLOWANCES_AGRICULTURAL") {
        row.flsbMoney = mapLabel(row.flsbType, "flsbTypeAgriMoney");
      }
      row.protection = true;
    },
    handleEditProtection(row) {
      if (row.protection === false) {
        row.flsbType = null;
        row.flsbMoney = null;
      }
    },
    handleEditIdcard(row) {
      var info = getAgeEtc(row.idCard);
      if (info === 0) {
        return;
      }
      row.sex = info.sex;
    },
    resetMemberTemp() {
      this.memberTemp = {
        relation: null,
        relationName: null,
        memberName: null,
        sex: null,
        idCard: null,
        nation: null,
        workStatus: null,
        health: null,
        flsbTypeDisplay: null, //分类施保情况
        flsbMoney: null, //分类施保金
        protection: null,
        remark: null,
        edit: false
      };
    },
    resetLivingAllowances() {
      this.livingAllowances = {
        tempId: null,
        approvalUser: {
          idCard: null,
          sex: null,
          name: null,
          address: null,
          householdType: null,
          phone: null,
          nationalityDisplay: null,
          birthDay: null,
          distDeprt: null,
          idCardImg: null
        },
        phone: null,
        members: [],
        areaCode: null, //地区CODE
        areaName: null, //行政区划名称
        householdType: null, //户口类型
        householdTypeName: null, //户口类型名称
        leastAddress: null, //最近住址
        familyNumber: null, //家庭人口
        baseMoneyType: null,
        livingAllowancesNumber: 0, //低保人口
        electricitySubsidy: 0, //电价补贴
        heatingCosts: 0, //取暖费
        accountType: null,
        account: null,
        otherMoney: 0,
        totalMoney: 0,
        flsbMoney: 0,
        approvedMoney: 0,
        communityDate: null, //评议日期
        communityPhone: null, //社区电话
        communityContact: null, //社区负责人
        communityOpinion: null, //社区意见
        files: [] //文件s
      };
      this.region = this.$store.state.user.region
    }
  }
};
</script>
<style scoped>
.el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  border: none;
  color: #000 !important;
  cursor: not-allowed;
}

.el-textarea.is-disabled .el-textarea__inner{
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #000 !important;
  cursor: not-allowed;
}

.idCardImgItem {
  width: 140px;
  height: 178px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.info-item .info-lable {
  font-size: 14px;
  padding-right: 5px;
  display: inline-block;
  color: #b7b7b7;
  height: 16px;
  overflow: hidden;
}

.info-item {
  flex-grow: 1;
}

.info-contentnationalityDisplay {
  max-width: 120px;
}

.info-item .info-content {
  font-size: 16px;
  padding-right: 5px;
  display: inline-block;
  overflow: hidden;
  height: 16px;

  overflow: hidden;
}

.el-row-main {
  margin-bottom: 30px !important;
}

.el-row-list {
  margin-bottom: 10px;
  margin-top: 10px;
  /* align-items: center; */
  /* display: flex; */
}

.el-card-header {
  font-size: 20px !important;
  color: #3ba4f5;
  padding-left: 20px;
}

.el-card-top {
  margin-bottom: 20px;
  overflow: hidden;
}

.el-card-tops {
  margin-top: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 98px;
  height: 98px;
  line-height: 98px;
  text-align: center;
}

.avatar {
  width: 98px;
  height: 98px;
  display: block;
}

.members::after {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.el-form input {
  width: 100%;
}

.memberTemp input {
  border: none;
}
</style>